<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎尼</title>
</head>

<body>
    <dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
        <dt>摩卡</dt>
        <dd>热摩卡咖啡</dd>
        <dt>酸奶</dt>
        <dd>北京老酸奶</dd>
        <dt>果汁</dt>
        <dd>鲜榨苹果汁</dd>
    </dl>

<!-- HTML结构 -->
<div id="test-div">
    <p id="test-js">javascript</p>
    <p>Java</p>
  </div>

  <div id="sz">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>
</body>
<script src="js/a18.js"></script>

</html>

-----------------------------------------------------------------------------------

// 更新DOM
// 拿到一个DOM节点后，我们可以对它进行更新。

// 可以直接修改节点的文本，方法有两种：

// 一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

var aa = document.getElementById("drink-menu")

console.log(aa.innerText);
var select = `
<select name="id">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
// `
setTimeout(() => {
    aa.innerHTML = select
}, 2000);
//显示HTML格式
setTimeout(() => {
    aa.textContent = select
})//显示文本代码,无换行
setTimeout(() => {
    aa.innerText = select
})//显示文本代码，换行




//打印当前时间
setTimeout(() => {
  
    var m = new Date()

console.log(m.toLocaleDateString());

}, 2000);

// JS获取当前时间

// Js获取当前日期时间及其它操作

// var myDate = new Date();

// myDate.getYear();        //获取当前年份(2位)

// myDate.getFullYear();    //获取完整的年份(4位,1970-????)

// myDate.getMonth();       //获取当前月份(0-11,0代表1月)

// myDate.getDate();        //获取当前日(1-31)

// myDate.getDay();         //获取当前星期X(0-6,0代表星期天)

// myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)

// myDate.getHours();       //获取当前小时数(0-23)

// myDate.getMinutes();     //获取当前分钟数(0-59)

// myDate.getSeconds();     //获取当前秒数(0-59)

// myDate.getMilliseconds();    //获取当前毫秒数(0-999)

// myDate.toLocaleDateString();     //获取当前日期

// var mytime=myDate.toLocaleTimeString();     //获取当前时间

// myDate.toLocaleString( );        //获取日期与时间

// 练习 有如下的HTML结构：

// javascript

// Java

// <!-- HTML结构 -->
// <div id="test-div">
//   <p id="test-js">javascript</p>
//   <p>Java</p>
// </div>
// 请尝试获取指定节点并修改：

'use strict';
// 获取<p>javascript</p>节点:
// var js = ???;

// 修改文本为JavaScript:
// TODO:

// 修改CSS为: color: #ff0000, font-weight: bold
// TODO:


//  var a=document.getElementById('test-div')
// console.log(a);


// // 测试:
// if (js && js.parentNode && js.parentNode.id === 'test-div' && js.id === 'test-js') {
//     if (js.innerText === 'JavaScript') {
//         if (js.style && js.style.fontWeight === 'bold' && (js.style.color === 'red' || js.style.color === '#ff0000' || js.style.color === '#f00' || js.style.color === 'rgb(255, 0, 0)')) {
//             console.log('测试通过!');
//         } else {
//             console.log('CSS样式测试失败!');
//         }
//     } else {
//         console.log('文本测试失败!');
//     }
// } else {
//     console.log('节点测试失败!');
// }




//随机生成100以内的数并且带颜色：
let sz = document.getElementById('sz')
let coloraar = ['rad','green','blue','yellow','black']
for(let i = 1 ; i <= 100 ; i++){
    let p = document.createElement('p')
    p.innerText = i;
    let rndindex = parseInt(Math.random() * coloraar.length) + 1
    console.log(rndindex);
    p.style.backgroundColor = coloraar[rndindex]
    p.id = `p${i}`
    sz.appendChild(p)
}
